<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-folder" @click="submitForm('ruleForm')">保存</el-button>
            </div>
            <div class="table-form-box">
                <h3 class="h3">人事调动</h3>
                <el-form :model="formData" :rules="rules" ref="ruleForm">
                    <table border="0" width="100%" cellpadding="0" cellspacing="1">
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="6">基本信息</td>
                            </tr>
                            <tr>
                                <td align="right">单据编号:</td>
                                <td>
                                    <el-form-item prop="recordNo">
                                        <el-input
                                            placeholder="保存后自动生成"
                                            v-model="formData.recordNo"
                                            size="small"
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>姓名:
                                </td>
                                <td>
                                    <el-form-item prop="shuffUserName">
                                        <div @click="showTreeDialog('姓名')">
                                            <!--puperiorUserId-->
                                            <el-input
                                                placeholder="请选择"
                                                v-model="formData.shuffUserName"
                                                size="small"
                                                readonly
                                                suffix-icon="el-icon-search"
                                            ></el-input>
                                        </div>
                                    </el-form-item>
                                </td>

                                <td align="right">
                                    <span class="color-ff2200">*</span>调动类型:
                                </td>
                                <td>
                                    <el-form-item prop="shuffTypeId">
                                        <el-select
                                            v-model="formData.shuffTypeId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'调动类型')"
                                            @focus="dictItemForPerfection('调动类型')"
                                        >
                                            <el-option
                                                v-for="(item,index) in shuffTypeOptions"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">目前部门:</td>
                                <td>
                                    <el-form-item prop="befDepartName">
                                        <el-input
                                            v-model="formData.befDepartName"
                                            size="small"
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">目前岗位:</td>
                                <td>
                                    <el-form-item prop="befRole">
                                        <el-input v-model="formData.befRole" size="small" disabled></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>调动日期:
                                </td>
                                <td>
                                    <el-form-item prop="applyTime">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.applyTime"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>调至部门:
                                </td>
                                <td>
                                    <div @click="showTreeDialog01('岗位')">
                                        <el-form-item prop="aftDepartName">
                                            <el-input
                                                v-model="formData.aftDepartName"
                                                size="small"
                                                readonly
                                                suffix-icon="el-icon-search"
                                            ></el-input>
                                        </el-form-item>
                                    </div>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>调至岗位:
                                </td>
                                <td>
                                    <el-form-item prop="aftRole">
                                        <el-input v-model="formData.aftRole" size="small" disabled></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>生效日期:
                                </td>
                                <td>
                                    <el-form-item prop="validTime">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="formData.validTime"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                            </tr>

                            <tr>
                                <td align="right">备注:</td>
                                <td colspan="5">
                                    <el-form-item prop="remarks">
                                        <el-input
                                            placeholder="请输入内容"
                                            type="textarea"
                                            :rows="3"
                                            v-model="formData.remarks"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-form>
                <upload-files :files="fileList" @fun="dealFiles" v-if="flag"></upload-files>
            </div>
        </div>
        <tree-search
            :isShow="showSearch"
            :dialogTitle="searchDialogTit"
            @edit="searchBack"
            @close="closeTreeDialog"
        ></tree-search>

        <tree-search-job
            :isShow="showSearch01"
            :dialogTitle="searchDialogTit01"
            @edit="searchBack01"
            @close="closeTreeDialog01"
        ></tree-search-job>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
export default {
    name: 'transfer',
    data() {
        return {
            pageTitle: '',
            formData: {
                aftDepartId: '', //调动后部门ID
                aftDepartName: '', //调动后部门名称
                aftRole: '', //调动后岗位
                aftRoleId: '', //调动后岗位ID
                applyTime: '', //调动日期
                befDepartId: '', //调动前部门ID
                befDepartName: '', //调动前部门名称
                befRole: '', //调动前岗位
                befRoleId: '', //调动前岗位ID
                recordNo: '', //单据编码
                remarks: '', //备注信息
                shuffTypeId: '', //调动类型Id   字典查询
                shuffTypeName: '', //调动类型名称  字典查询
                shuffTypeValue: '', //调动类型值  字典查询
                shuffUserId: '', //调动人员id
                shuffUserName: '', //调动人员名字
                validTime: '' //生效日期
            },
            rules: {
                shuffUserName: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                shuffTypeId: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                aftDepartName: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],

                //调动日期
                applyTime: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                validTime: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                remarks: [
                    {
                        min: 0,
                        max: 3000,
                        message: '长度在 2 到 3000 个字符',
                        trigger: 'change'
                    }
                ]
            },
            flag: false,
            isEdit: false,
            editId: '',
            dialogVisible: false,

            // 上传文件,选择的文件
            fileList: [],
            showSearch: false, // 显示搜索树弹窗
            searchDialogTit: '编辑',
            showSearch01: false, // 显示搜索树弹窗
            searchDialogTit01: '编辑',
            //调动类型
            shuffTypeOptions: []
        };
    },
    created() {
        this.dictItemForPerfection('调动类型');
        // 如果有id就是跳转过来修改的
        if (this.$route.query.id) {
            this.editId = this.$route.query.id;
            this.isEdit = true;
            this.getData(); // 获取要修改的数据
        } else {
            this.isEdit = false;
            this.flag = true;
        }
    },
    methods: {
        getData() {
            appMain
                .transferFindById({}, this.editId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.formData = res.data.data;
                        //获取人员档案附件
                        this.uploadFileInfoFindById(this.formData.id);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                        this.flag = true;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submit() {
            let params = this.formData;
            let mothedName = '';
            if (this.isEdit) {
                mothedName = 'transferUpdateById';
            } else {
                mothedName = 'transferInsert';
            }

            appMain[mothedName](params)
                .then(res => {
                    if (res.data.code === 20000) {
                        if (this.isEdit) {
                            this.getData();
                        }
                        this.$router.push({
                            path: '/transferList' //跳转的路径
                        });
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                });
            console.log(this.$router);
        },
        // 选择员工
        showTreeDialog(tit) {
            console.log('showTreeDialog');
            this.searchDialogTit = tit;
            this.showSearch = true;
        },

        // 树组件搜索结果返回
        searchBack(data) {
            console.log(data.backData, 'searchTreeBack');
            this.formData.shuffUserName = data.backData.name;
            this.formData.shuffUserId = data.backData.id;
            this.formData.befRole = data.backData.jobName;
            this.formData.befRoleId = data.backData.jobId;
            this.formData.befDepartName = data.backData.organizationName;
            this.formData.befDepartId = data.backData.organizationId;
            this.showSearch = false;
        },
        closeTreeDialog(data) {
            this.showSearch = data.showDialog;
        },
        // 选择岗位
        showTreeDialog01(tit) {
            console.log('showTreeDialog');
            this.searchDialogTit01 = tit;
            this.showSearch01 = true;
        },

        // 树组件搜索结果返回
        searchBack01(data) {
            console.log(data.backData, 'searchTreeJobBack');
            this.formData.aftRole = data.backData.name;
            this.formData.aftRoleId = data.backData.id;
            this.formData.aftDepartName = data.backData.departName;
            this.formData.aftDepartId = data.backData.departId;
            this.showSearch01 = false;
        },
        closeTreeDialog01(data) {
            this.showSearch01 = data.showDialog;
        },
        // 上传文件返回
        dealFiles(data) {
            this.fileList = data.backData;
            this.formData.uploadReturns = this.fileList;
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.submit();
                    //this.resetForm('ruleForm');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /**
         * 下拉框数据start
         */
        dictItemForPerfection(item) {
            appMain.dictItem({ typeName: item }).then(res => {
                if (res.data.code === 20000) {
                    if (item == '调动类型') {
                        this.shuffTypeOptions = res.data.data;
                    }
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        //下拉框选取值
        handleValue(e, dict) {
            if (dict == '调动类型') {
                let item = this.selectChooseItem(this.shuffTypeOptions, e);
                this.formData.shuffTypeId = item.id;
                this.formData.shuffTypeName = item.itemName;
                this.formData.shuffTypeValue = item.itemValue;
            }
        },
        //通用字典选择
        selectChooseItem(item, id) {
            for (const key in item) {
                if (item[key].id == id) {
                    return item[key];
                }
            }
        }
        /**
         * 下拉框获取end
         */
    },
    mounted() {
        this.pageTitle = this.$router.currentRoute.meta.title;
    }
};
</script>

<style scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    /* padding: 5px 50px; */
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}

.table {
    width: 100%;
    font-size: 14px;
}

.table-form-box table {
    background-color: #666;
}
.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    min-height: 40px;
    font-size: 12px;
}
.color-ff2200 {
    color: #ff2200;
}
</style>
